import {ApplicationConfigurationProvider} from "plain-design";
import {computed} from "@peryl/react-compose";
import Color from "color";

export function useSketchColors() {
  const configuration = ApplicationConfigurationProvider.inject();

  const bgColors = computed(() => {
    const originColor = Color(configuration.value.theme.vars['primary-2']);
    const space = 0.02;
    const bg1 = configuration.value.theme.dark ? originColor.lighten(1 * space).hex() : originColor.darken(1 * space).hex();
    const bg2 = configuration.value.theme.dark ? originColor.lighten(2 * space).hex() : originColor.darken(2 * space).hex();
    const bg3 = configuration.value.theme.dark ? originColor.lighten(3 * space).hex() : originColor.darken(3 * space).hex();
    const bg4 = configuration.value.theme.dark ? originColor.lighten(4 * space).hex() : originColor.darken(4 * space).hex();
    const bg5 = configuration.value.theme.dark ? originColor.lighten(5 * space).hex() : originColor.darken(5 * space).hex();
    const bg6 = configuration.value.theme.dark ? originColor.lighten(6 * space).hex() : originColor.darken(6 * space).hex();
    const bg7 = configuration.value.theme.dark ? originColor.lighten(7 * space).hex() : originColor.darken(7 * space).hex();
    return { bg1, bg2, bg3, bg4, bg5, bg6, bg7 };
  });

  return {
    sketchColorsColors: computed(() => {
      const {
        'primary-1': color1,
        'primary-2': color2,
        'primary-3': color3,
        'primary-4': color4,
        'primary-5': color5,
        'primary-6': color6,
      } = configuration.value.theme.vars;

      return {
        color1,
        color2,
        color3,
        color4,
        color5,
        color6,
        ...bgColors.value,
      };
    })
  };
}
